<!DOCTYPE html>
<html  >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>当当网我的订单页</title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
<style type="text/css" >
  *{
	  margin:0px;
	  padding:0px;
	  font-size:12px;
  }
  a{
	color:#999;
	text-decoration:none;
  }
  body{
	  background:#fff url(images/bg.jpg) no-repeat; 
  }
  ul{
	  list-style:none;
  }
  .pos{
	position:absolute; 
 }
 #menu{ 
	 left:931px;
	 top:5px;
}
 #menu li{
	display:block;
	height:20px;
	line-height:20px; 
	background-color:#fff; 
	padding:4px;
}
 
#tabs{
	 left:222px;
	 top:237px
	}
#tab-top{
	height:30px;
	line-height:30px;
	padding-left:20px;  
	border-bottom:1px solid #15B69A;
	
}
#tab-top ul li{
	display:block;
	float:left;
	padding:0px 15px;
	border:1px solid #C6C5C5;
	border-bottom:1px solid #15B69A;
	background-color:#F0F0F0;
	margin-right:10px;
	margin-top:-1px;
	cursor:pointer;
}
#tab-top ul li.on{  
	border:1px solid #15B69A;
	border-top:2px solid #15B69A;
	border-bottom:none;
	background-color:#F0FCF1; 
}

</style>
<script type="text/javascript">
	 $(function(){
	 	//下拉菜单
		$("#menu").hover(function(){
			$(this).css("border","1px solid #EE7304");
			$("#menu-ul").show();
		},function(){
			$(this).css("border","none");
			$("#menu-ul").hide();
		});
		//TAB内容切换
		$("#tab-top ul li").click(function(){
			$(this).addClass("on");
			$(this).siblings("li").removeClass("on");
			//对于的div内容切换
			$("div.content").hide();
			$("div.content").eq($(this).index()).show(1800);
		});
	 });
</script>
</head>
<body>
<!-- 下拉菜单 -->
 <div id="menu" class="pos">
 	<a href="#">我的当当</a>
    <ul id="menu-ul"  style="display:none;">
    	<li><a href="#">我的订单</a></li>
        <li><a href="#">我的收藏</a></li>
        <li><a href="#">我的礼品卡</a></li>
        <li><a href="#">我的积分</a></li>
        <li><a href="#">我的余额</a></li>
    </ul> 
 </div> 
 
 <!-- tabs -->
 <div id="tabs" class="pos">
 	<div id="tab-top">
    	<ul>
        	<li class="on">我的订单</li>
            <li>我的团购订单</li>
        </ul>
    </div>
 	<div  class="content" >
    	<img src="images/order.jpg" />
    </div>
    <div  class="content" style="display:none;">
    	<img src="images/tuan.jpg" />
    </div>
 </div>
</body>
</html>
